/**
 * Created by admin on 2017/7/31.
 */

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    ListView,
    TouchableOpacity, //不透明度触摸
    AlertIOS
} from 'react-native';

//导入json数据
var shareData = require('./shareData.json');

var Dimensions = require('Dimensions');
var {width} = Dimensions.get('window');
var screenWidth = Dimensions.get('window').width;

//一些常量设置
var cols = 3;
var cellWH = 100;

var vMargin = (screenWidth - cellWH * cols) / (cols + 1);
var hMargin = 25;

var listViewNine = React.createClass({//类名一定要大写开头
    //设置默认值(固定值,上下级界面数据的顺传)
    getDefaultProps() {

    },

    //设置一些初始值(可以变化的)
    getInitialState() {
        //创建数据源
        var ds = new ListView.DataSource({rowHasChanged:(r1, r2) => r1 !== r2});
        return {
            dataSource: ds.cloneWithRows(shareData.data)
        }
    },

    //渲染页面
    render(){
        return(
            <ListView
                dataSource={this.state.dataSource}
                renderRow={this.renderRow}
                contentContainerStyle={styles.listViewStyle}
            />
        )
    },

    //单独的cell
    renderRow(rowData, sectionTD, rowID, highlightRow){
        return(
            <TouchableOpacity activeOpacity={0.5} onPress={()=>{AlertIOS.alert('哈哈')}}>
                <View style={styles.innerViewStyle}>
                    <Image source={{ uri: rowData.icon }} style = { styles.iconStyle } />
                    <Text style={styles.titleStyle}> {rowData.title} </Text>
                </View>
            </TouchableOpacity>
        )
    }

})


const styles = StyleSheet.create({
    listViewStyle:{
        //    改变主轴的防线
        flexDirection:'row',
        //    多行显示
        flexWrap:'wrap',
        alignItems: 'flex-start'
    },
    innerViewStyle:{
        width:cellWH,
        height:cellWH,
        marginLeft:vMargin,
        marginTop:hMargin,

        //    居中
        alignItems:'center',
        justifyContent:'center',
    },
    iconStyle:{
        width:80,
        height:80
    },
    titleStyle:{
        marginTop:5,
        fontSize:15
    }
});

//输出类
module.exports = listViewNine;